<template>
    <div class='container'>
      <el-container style="height: 100vh;">
        <!--  头部   -->
        <el-header class='header'>
          <el-row type="flex" justify="center" align='middle'>
            <el-col :span="13">
              <el-menu
                  :default-active="activeIndex"
                  class="el-menu-demo"
                  mode="horizontal"
                  :ellipsis="false"
                  @select="handleSelect"
              >
                <el-menu-item index="0">
                  <img
                      style="width: 150px"
                      src="../assets/images/element-plus-logo.svg"
                      alt="Element logo"
                  />
                </el-menu-item>
                <div class="flex-grow"/>
                <el-menu-item index="1">首页</el-menu-item>
                <el-menu-item index="2">分类</el-menu-item>
                <el-menu-item index="3">标签云</el-menu-item>
                <el-menu-item index="4">资源</el-menu-item>
              </el-menu>
            </el-col>
            <el-col :span="4">
              <el-input
                  v-model="queryParams"
                  style="width: 240px;"
                  placeholder="全局搜索"
                  :prefix-icon="Search"
              />
            </el-col>
            <el-col :span="7" class="custom-col">
              <div class="custom-container">
                <el-dropdown>
                  <el-avatar :size="state.size" :src="userStore.avatar" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="goToEditArticle">写博客</el-dropdown-item>
                      <el-dropdown-item>个人设置</el-dropdown-item>
                      <el-dropdown-item divided>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <!-- 其他元素，如通知、刷新、主题切换 -->
              </div>
            </el-col>
          </el-row>
        </el-header>
        <!--   主体部分   -->
        <el-container class='main'>
          <!--   我是左边栏捏     -->
          <component :is="leftComponent" @changeLeftMenu="handleLeftSelect"/>
          <el-main class="main-content">
            <!-- 主要内容区域 -->
            <component :is="mainComponent" :changeArtView="changeArtView"/>
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>
  
<script lang="ts" setup>
  import '@/assets/css/manageIndex.css';
  import LeftSidebarMenu from '@/components/sidebar/MenuLeftSidebar.vue'
  import EditArticle from '@/components/article/EditArticle.vue'
  import { useRouter } from 'vue-router'
  import {useArticleStore} from '@/stores/modules/article'
  import {useUserStore} from '@/stores/modules/user'
  import {ref,onMounted,shallowRef,reactive} from 'vue';
  import {
    Search
  } from '@element-plus/icons-vue'

  //数据
  const mainComponent = shallowRef(EditArticle)
  const leftComponent= shallowRef(LeftSidebarMenu)
  const articleStore = useArticleStore()
  const userStore=useUserStore()
  const router = useRouter()
  const queryParams = ref("ArticleView")
  const activeIndex = ref('1')
  const state = reactive({
    size: 30
  })

  //函数
  //顶栏菜单栏的切换
  const handleSelect = (key: string, keyPath: string[]) => {
    switch (key) {
      case '1'://点击首页，切回首页的列表页和左边栏
        mainComponent.value = EditArticle
        leftComponent.value = LeftSidebarMenu
        break;
      default:
        break;
    }
    //console.log(key, keyPath)
  }

  //左边栏控制切换
  const handleLeftSelect = (key: string, keyPath: string[]) => {
    switch (key) {
      case '1':
      case '2':
      case '3':
      case '4':
      case '5':
      case '6'://点击切回首页的列表页
        mainComponent.value = EditArticle
        break;
      default:
        break;
    }
    //console.log(key, keyPath)
  }

  const goToEditArticle = () => {
    router.push({ name: 'manage' }) // 跳转到 editAriicle 页面
  }

  //切换到文章视图
  const changeArtView = (params:any) => {
    articleStore.article=params
    activeIndex.value=''//清空上方菜单的选中样式，参考知乎
    mainComponent.value=EditArticle
  }

  //事件注册

  //钩子
  onMounted(()=>{
    userStore.queryById()
  })


</script>
  
  <style scoped>
  /*可以在这里添加博客页面的样式（对原本ele样式的覆盖重写*/
  /*头部 */
  .el-header {
    padding-left: 0px;
    padding-right: 0px
  }
  /*取消主体区域的边距 */
  .el-main{
    padding:0
  }
  /*头像及覆盖*/
  .el-avatar {
    border: 1px solid #ffffff; /* 添加蓝色边框 */
    box-shadow: 0 0 4px rgba(64, 158, 255, 0.5); /* 添加阴影效果 */
    transition: all 0.3s ease; /* 添加平滑过渡效果 */
    cursor: pointer; /* 悬停时鼠标指针变成小手 */
    outline: none; /* 去掉点击时的黑色边框 */
  }
  
  .el-avatar:hover {
    border-color: #66b1ff; /* 鼠标悬停时改变边框颜色 */
    box-shadow: 0 0 12px rgba(64, 158, 255, 0.8); /* 鼠标悬停时增加阴影效果 */
  }
  </style>
  